<template >
    <div class="searchDialog">
        <div class="e-form">
            <el-form
                label-width="120px"
                :model="searchForm"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合同编号：" prop="contractNumber">
                            <el-input v-model="searchForm.contractNumber" placeholder="请输入内容" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="合同名称：" prop="contractName">
                            <el-input v-model="searchForm.contractName" placeholder="请输入内容" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="协作队伍：" prop="collaborativeTeam">
                            <el-input v-model="searchForm.collaborativeTeam" placeholder="请输入内容" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="签订日期：" prop="signingStartDate">
                            <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="searchForm.signingStartDate" :clearable="false" style="width: 47%;"></el-date-picker>
                            <div class="separ el-icon-minus"></div>
                            <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="searchForm.signingEndDate"  :clearable="false" style="width: 47%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="type == 1">
                    <el-col :span="24">
                        <el-form-item label="合同类型：" prop="contractTypeIds">
                           <check-all :chackdData="subTypeFormObj" @checkdData="onCheckSubTypeFormObj" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-else-if="type == 2">
                    <el-col :span="24">
                        <el-form-item label="合同类型：" prop="contractTypeIds">
                           <check-all :chackdData="otherSubTypeFormObj" @checkdData="onCheckSubTypeFormObj" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-else-if="type == 3">
                    <el-col :span="24">
                        <el-form-item label="合同类型：" prop="contractTypeIds">
                           <check-all :chackdData="serviceTypeList" @checkdData="onCheckSubTypeFormObj" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="所属机构：" prop="orgIds">
                            <el-input
                                v-model="searchForm.orgName"
                                placeholder="请选择"
                                readonly
                            >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy"
                                    @click="onSelectOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="24">
                        <el-form-item label="合同状态：" prop="contractState">
                            <check-all :chackdData="stateArr" @checkdData="onCheckStateObj" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                       <el-form-item label="主要合同内容：" prop="contractContext">
                           <el-input type="textarea"  v-model="searchForm.contractContext" placeholder="请输入内容" maxlength="200"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- <div class="footer-btn">
           <div class="buttons">
                <el-button type="primary" size="small" class="btn-blue">重置</el-button>
                <el-button
                    type="primary"
                    size="small"
                    class="btn-blue"
                >保存</el-button>
                <el-button size="small" @click="handleClose">取消</el-button>
            </div>
        </div> -->
        <div style="display: none;">{{localSearchData}}</div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { selectDataClient, openAppClient } from '@/utils/common'
import CheckAll from '@/components/common/checkAll'
export default {
    components: {
        CheckAll
    },
    data () {
        return {
            searchForm: {
                'collaborativeTeam': '',
                'contractName': '',
                'contractNumber': '',
                'contractState': [],
                'contractTypeIds': [],
                'orgIds': [ localStorage.getItem('searchOrgId') ],
                'signingEndDate': '',
                'signingStartDate': '',
                'contractContext': '',
                'orgName': localStorage.getItem('searchOrgName'),
            },
            type: 1, //合同名称：1，分包合同,2，其他合同,3，服务采购合同
        }
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        },
        ...mapState({
            state: state => state.equip.equipData.state, //通用流程状态
            stateArr: state => state.contract.ctClassify.stateArr, //分包合同状态
            subTypeFormObj: state => state.contract.ctClassify.subTypeFormObj, //分包合同类型
            otherSubTypeFormObj: state => state.contract.ctClassify.otherSubTypeFormObj, //其他合同类型
            serviceTypeList: state => state.contract.ctClassify.serviceTypeList, //其他合同类型
        }),
    },
    mounted () {
        this.type = this.$route.query.type
    },
    methods: {
        ...mapMutations(['setSearchData', 'setSelectedInfo']),
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '',    // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.orgIds = [ val[0].orgId ]
                this.searchForm.orgName = val[0].orgName
            })
        },
        onCheckStateObj (data) {
            this.searchForm.contractState = data
        },
        onCheckSubTypeFormObj (data) {
            this.searchForm.contractTypeIds = data
        },
        handleClose () {
            this.$router.push('/')
        }
    },
}
</script>

<style lang="scss">
</style>